<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .bottom-color{
        border: red solid 1px;
    }

</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>




<body>

<h1> 单纯 JavaScript 方式实现 </h1>
<div class="title-list">
    <ul>
        <li><div class="list-detail">123123</div></li>
        <li><div class="list-detail">123123</div></li>
        <li><div class="list-detail">123123</div></li>
        <li><div class="list-detail">123123</div></li>
    </ul>
</div>


<h1> jquery 方式实现 </h1>
<div class="title-list-jquery">
    <ul>
        <li><div class="list-detail-jquery">123123</div></li>
        <li><div class="list-detail-jquery">123123</div></li>
        <li><div class="list-detail-jquery">123123</div></li>
        <li><div class="list-detail-jquery">123123</div></li>
    </ul>
</div>

</body>

<script>


    //  单纯 JavaScript 方式实现
    var lis = document.querySelectorAll(".title-list ul li"); // 4个li
    var lists = document.querySelectorAll(".list-detail");   // 对应li下面的内容DIV

    for (var i = 0, len = lis.length; i < len; i++) {
        (function(i){
            lis[i].onclick = function(event) {
                this.className = "bottom-color";       // 点击的时候高亮显示下边框
                // lists[i].style.display = "block";      // 显示该li
                toggleClassName(i,lis,lists);          // 隐藏其他li
            }
        })(i);
    }
    function toggleClassName(index,lis,lists) {       // 隐藏函数
        for (var i = 0, len = lis.length; i < len; i++) {
            if (i != index) {
                lis[i].className = "";
            }
        }
    }






    //  jquery 方式实现
    var $lis = $(".title-list-jquery ul li");  // 4个li
    var $lists = $(".list-detail-jquery");     // 对应li下面的内容DIV

    $lis.click(function(event){
        $(this).addClass("bottom-color").siblings().removeClass("bottom-color");
        // var index = $lis.index($(this));
        // $($lists[index]).css("display", "block");          // 显示该li
        // $lists.not($lists[index]).css("display", "none");   // 隐藏这个元素
    });




</script>
</html>